<script setup>
import { computed } from 'vue'

const props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 20
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  background: {
    type: Boolean,
    default: true
  },
  autoScroll: {
    type: Boolean,
    default: true
  },
  hidden: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:page', 'update:limit', 'pagination'])

const currentPage = computed({
  get() {
    return props.page
  },
  set(val) {
    emit('update:page', val)
    emit('pagination', { page: val, limit: props.limit })
  }
})

const pageSize = computed({
  get() {
    return props.limit
  },
  set(val) {
    emit('update:limit', val)
    emit('pagination', { page: props.page, limit: val })
  }
})

const handleSizeChange = (val) => {
  pageSize.value = val
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  if (props.autoScroll) {
    scrollTo(0, 800)
  }
}
</script>

<template>
  <div v-show="!hidden" class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :background="background"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.pagination-container {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.el-pagination {
  padding: 0;
  margin: 0;
}

/* 暗色模式适配 */
:root[data-theme='dark'] .el-pagination {
  --el-pagination-button-bg-color: var(--bg-primary);
  --el-pagination-hover-color: var(--primary-color);
}

:root[data-theme='dark'] .el-pagination .el-input__inner {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

:root[data-theme='dark'] .el-select-dropdown {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

:root[data-theme='dark'] .el-select-dropdown__item {
  color: var(--text-primary);
}

:root[data-theme='dark'] .el-select-dropdown__item.hover,
:root[data-theme='dark'] .el-select-dropdown__item:hover {
  background-color: var(--hover-bg);
}
</style> 